<template>
    <view v-if="hotelInfo.id">
        <view class="info br-24 mt-16 mt-24 pt-20">
            <view class="pl-30 pr-24 align-center space-between" @click="handleSwitch">
                <text class="ft-32 bold">酒店信息</text>
                <view class="align-center" v-if="false">
                    <text class="mr-4 t-9 ft-26">切换地址</text>
                    <hj-image src="right-03.png" height="26rpx" width="26rpx" mode="aspectFit" />
                </view>
            </view>
            <view class="info-in flex p-30 pt-20" @click="goAbout">
                <hj-image
                    :img="hotelInfo.coverImage"
                    height="180rpx"
                    width="180rpx"
                    mode="aspectFill"
                    radius="12rpx"
                />
                <view class="flex-auto pl-20 pt-6">
                    <view class="ft-30 t-3 title">
                        {{ hotelInfo.hotelNameZh || ''
                        }}<text v-if="hotelInfo.addressName">({{ hotelInfo.addressName }})</text>
                    </view>
                    <view class="ft-26 t-9 mt-8">{{ hotelInfo.addressZh }}</view>
                </view>
            </view>
            <view class="space-between menu">
                <view class="menu-item center w100" @click="goContact">
                    <hj-image
                        src="menu-05.png"
                        :height="iconsSize"
                        :width="iconsSize"
                        mode="aspectFit"
                    />
                    <view class="ft-28 t-3 pl-12"> 联系客服 </view>
                </view>
                <view class="menu-item center w100" @click="goAbout">
                    <hj-image
                        src="menu-02.png"
                        :height="iconsSize"
                        :width="iconsSize"
                        mode="aspectFit"
                    />
                    <view class="ft-28 t-3 pl-12">酒店简介</view>
                </view>
                <view class="menu-item center w100" @click="goPilot">
                    <hj-image
                        src="menu-03.png"
                        :height="iconsSize"
                        :width="iconsSize"
                        mode="aspectFit"
                    />
                    <view class="ft-28 t-3 pl-12">导航到店</view>
                </view>
            </view>
        </view>
        <view class="pb-40"></view>
    </view>
</template>

<script setup>
/**
 * @description 当前酒店信息
 * @author yinzhi
 * @date 2025-05
 */
import { ref, defineComponent, computed } from 'vue'
import { throttle } from '@/uni_modules/uview-plus'
defineComponent({
    name: 'HotelInfo'
})
import { useStore } from 'vuex'
const store = useStore()
const hotelInfo = computed(() => store.state.platform.hotelInfo || '')

const iconsSize = ref('40rpx')

// 切换酒店
const handleSwitch = () => {
    throttle(() => {
        uni.showToast({
            title: '酒店分地址正在筹备中！',
            duration: 2000,
            icon: 'none'
        })
    }, 2500)
}

// 关于懿家
const goAbout = () => {
    const id = hotelInfo.value.id || ''
    if (!id) return
    uni.navigateTo({
        url: `/pages/hotel/hotel-about/index?hotelId=${id}`
    })
}

// 联系客服
const goContact = () => {
    uni.showModal({
        title: '联系客服',
        content: '是否拨打客服电话？',
        success: res => {
            if (res.confirm) {
                uni.makePhoneCall({
                    phoneNumber: hotelInfo.value.phone || '',
                    fail: e => {
                        console.error('联系客服失败：', e)
                    }
                })
            }
        }
    })
}
// 打开内置地图 注意经纬度不能是字符串
const goPilot = () => {
    if (!hotelInfo.value.latitude || !hotelInfo.value.longitude) {
        return
    }
    let name = `${hotelInfo.value.hotelNameZh}${
        hotelInfo.value.addressName ? '(' + hotelInfo.value.addressName + ')' : ''
    }`
    uni.openLocation({
        longitude: Number(hotelInfo.value.longitude),
        latitude: Number(hotelInfo.value.latitude),
        name: name,
        address: hotelInfo.value.addressZh,
        fail: e => {
            console.error('地图打开失败：', e)
        }
    })
}
</script>

<style scoped lang="scss">
.info {
    background: $uni-bg-color;
    box-shadow: 0 0 10rpx 0 rgba($color: #000000, $alpha: 0.08);
    &-in {
        .title {
            min-height: 88rpx;
        }
    }
    .menu {
        border-top: 1px solid $uni-bg-color-grey;
        &-item {
            height: 88rpx;
            border-right: 1px solid $uni-bg-color-grey;
        }
        &-item:last-child {
            border: none;
        }
    }
}
</style>
